<template>
	<view class="member-container" style="padding-bottom: 50rpx">
		<view class="top">
			<view class="container">
				<view class="userinfo">
					<!--        <view class="avatar"></view>-->
					<image v-if="avatar" src="@/static/images/logo.png" class="avatar"></image>
					<view class="right">
						<view class="username">{{$store.state.user.nickname}}</view>
						<view class="tel">tel : {{$store.state.user.name}}</view>
					</view>
				</view>

				<view class="member-info">
					<view class="corner">member</view>
					<view class="badge"></view>
					<view class="level">
						<view class="emphasis">V{{level}}</view>
						<view class="text">会员</view>
					</view>
					<view class="total">合计成功查询{{total}}笔</view>
				</view>
			</view>

			<view class="grid">
				<view class="item">
					<view class="img"></view>
					<view class="desc">自定提成</view>
				</view>
				<view class="item">
					<view class="img"></view>
					<view class="desc">自定佣金</view>
				</view>
				<view class="item">
					<view class="img"></view>
					<view class="desc">定制底价</view>
				</view>
				<view class="item">
					<view class="img"></view>
					<view class="desc">高收入秒提现</view>
				</view>
			</view>
		</view>

		<member-section title="产品权益" more-text="定制底价" @more="$refs.popup.open('center')">
			<view class="section01">
				<view class="left">
					<view class="title-box">产品</view>
					<view class="title-box" v-for="(item,index) in products">{{item.productName}}_底价</view>
				</view>
				<view class="right">
					<view class="box" v-for="(item,index) in ['V0','V1','V2','V3级以上']" :key="index"
						:class="{'box-active':level===index}">
						<view class="line">{{item}}</view>
						<view class="line" v-for="(item,i) in products">{{item['v'+index+'Pricing']}}</view>
					</view>
				</view>
			</view>
		</member-section>

		<member-section title="推广权益" more-text="更多推广" @more="$modal.showToast('暂无更多推广！')">
			<swiper style="height: 230rpx" :indicator-dots="true" :autoplay="true" :interval="2000" :circular="true"
				class="swiper" indicator-active-color="#254CC1" indicator-color="#DDDDDD">
				<swiper-item v-for="(item,index) in promotes" :key="index">
					<view class="section03">
						<member-section-item 
							:icon="'/static/images/member/icon-1.png'"
							:title="item.productName+'—邀请查询'"
							:desc="'得佣金'+item.brokerage+'元，红包转轮机会'+item.redPacketNum+'次'" 
							:btnText="'去完成'"
							:productId="item.productId" />
						<member-section-item 
							:icon="'/static/images/member/icon-2.png'"
							:title="item.productName+'—邀请代理'" 
							:desc="'名下代理查询一笔您得'+item.royalty+'元提成'"
							:btnText="'去邀请'" />
					</view>
				</swiper-item>
			</swiper>
		</member-section>

		<view style="margin-bottom: 100rpx">
			<member-section title="会员等级说明" :show-more="false">
				<swiper style="height: 120rpx" :indicator-dots="true" :autoplay="true" :interval="2000" :circular="true"
					class="swiper" indicator-active-color="#254CC1" indicator-color="#DDDDDD">
					<swiper-item v-for="(value,key,index) in Vorder">
						<view class="section03">
							<member-section-item :icon="'/static/images/member/icon-1.png'" :title="key+'级'"
								:desc="'享产品权益底价，需累计查询'+value+'单'+ (key in Vagency?'，名下代理'+Vagency[key]+'名':'')" />
						</view>
					</swiper-item>
				</swiper>
			</member-section>
		</view>

		<uni-popup ref="popup" >
			<view id="pop">
				<view style="text-align: center;">您的定制底价</view>
				<uni-section v-for="(item,index ) of products" :title="item.productName">
					<template v-slot:right>
						{{item.customizedPrice == null?'暂无':item.customizedPrice}}
					</template>
				</uni-section>
				<view style="text-align: center;color: red;">需求大可联系客服定制更低底价</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getLevel,
		queryCount,
		productEquity,
		promoteEquity,
		levelInfo
	} from '@/api/system/equities.js'

	export default {
		data() {
			return {
				level: 0,
				total: 0, // 总次数
				products: [],
				promotes: [],
				Vorder: [],
				Vagency: [],
				useNumber: 10, // 查询次数
				lineWidth: 216, // line的宽度
				dotWidth: 30, // 点的宽度
				actualLeft: null
			}
		},
		mounted() {
			this.initLine()
			getLevel().then(res => {
				this.level = Number.parseInt(res.msg.slice(1, 2))
			})
			queryCount().then(res => {
				this.total = res.data
			})
			productEquity().then(res => {
				if (res.code == 200) {
					this.products = res.data
				} else {
					this.$modal.msg(res.msg)
				}
			})
			promoteEquity({}).then(res => {
				if (res.code == 200) {
					this.promotes = res.data
				} else {
					this.$modal.msg(res.msg)
				}
			})
			levelInfo().then(res => {
				this.Vorder = res.order_num
				this.Vagency = res.agency_num
			})
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			nickname() {
				return this.$store.state.user.nickname
			}
		},
		methods: {
			initLine() { // 初始化线条
				let maxLeft = this.lineWidth - this.dotWidth
				let actualLeft = (this.useNumber / this.total) * this.lineWidth

				if (actualLeft > maxLeft) {
					actualLeft = maxLeft
				}
				this.actualLeft = actualLeft
			}
		}
	}
</script>

<style lang="scss">
	.member-container {
		background-color: #F5F6FC;

		.top {
			width: 100%;
			height: 708rpx;
			background: linear-gradient(180deg, #2054CE 0%, #4245F6 27%, rgba(110, 154, 255, 0.01) 100%);
			//background: linear-gradient(to bottom,#2054CE 0,#4245F6 50%,rgba(110, 154, 255, 0.01) 100%);
			padding: 48rpx 32rpx;
			box-sizing: border-box;

			.container {
				width: 100%;
				height: 400rpx;

				//border: 1px solid red;
				//background: url("@/static/images/member/userinfo-bg.png") no-repeat left bottom;
				//background-size: contain;
				.userinfo {
					display: flex;
					height: 86rpx;
					align-items: center;

					.avatar {
						width: 80rpx;
						height: 80rpx;
						// border: 1px solid #fff;
						// border-radius: 40%;
					}

					.right {
						color: #fff;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;

						.username {
							font-family: PingFang SC, PingFang SC;
							font-weight: 600;
							font-size: 32rpx;
						}

						.tel {
							font-weight: 400;
							font-family: PingFang SC, PingFang SC;
							font-size: 24rpx;
							opacity: 0.6;
						}
					}
				}

				.member-info {
					height: 288rpx;
					margin-top: 42rpx;
					//border: 1px solid red;
					position: relative;
					background: url("@/static/images/member/memberinfo-bg.png") no-repeat left bottom;
					background-size: contain;
					padding: 2rpx 0 0 2rpx;
					box-sizing: border-box;

					.corner {
						width: 116rpx;
						height: 34rpx;
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						background: linear-gradient(90deg, #ADDEFE 0%, #7790F4 100%);
						border-radius: 16rpx 0 30rpx 0;
					}

					.badge {
						position: absolute;
						width: 340rpx;
						height: 320rpx;
						background: url("@/static/images/member/badge.png") no-repeat 0 0;
						background-size: contain;
						left: 344rpx;
						top: -104rpx;

					}

					.level {
						font-family: PingFang SC, PingFang SC;
						color: #6F7896;
						font-weight: 400;
						font-size: 24rpx;
						margin-left: 32rpx;
						display: flex;

						.emphasis {
							width: 132rpx;
							height: 122rpx;
							font-family: Source-KeynoteartHans, Source-KeynoteartHans;
							background: linear-gradient(48.921665994772695deg, #4E96D5 0%, #213E62 100%);
							font-weight: bold;
							font-size: 104rpx;
							/* 将背景裁剪到文字的区域 */
							-webkit-background-clip: text;
							/* 将文字颜色设置为透明，以显示背景 */
							color: transparent;
							transform: skewX(-20deg);
						}

						.text {
							align-self: flex-end;
						}
					}

					.total {
						margin: 72rpx 0 0 32rpx;
						color: #214B62;
						font-size: 20rpx;
						opacity: 0.6;
					}
				}
			}

			.grid {
				margin-top: 56rpx;
				display: flex;
				justify-content: space-between;

				.item {
					.img {
						height: 92rpx;
						width: 170rpx;
						box-sizing: border-box;
						border-radius: 50%;
						//background-color: #fff;
						background: url("@/static/images/member/grid-1.png") no-repeat center center / contain;
					}

					.desc {
						color: #254CC1;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						margin-top: 16rpx;
						width: 100%;
						text-align: center;
					}

					&:nth-of-type(2) .img {
						background: url("@/static/images/member/grid-2.png") no-repeat center center / contain;
					}

					&:nth-of-type(3) .img {
						background: url("@/static/images/member/grid-3.png") no-repeat center center / contain;
					}

					&:nth-of-type(4) .img {
						background: url("@/static/images/member/grid-4.png") no-repeat center center / contain;
					}
				}
			}
		}
	}

	.section01 {
		display: flex;
		justify-content: space-between;

		.left {
			flex: 1;

			.title-box {
				width: 100%;
				height: 66rpx;
				line-height: 66rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				font-size: 18rpx;
				color: #000;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				border-bottom: 1px solid rgba(148, 148, 156, 0.40);

				&:nth-child(odd) {
					background-color: rgba(136, 173, 255, 0.1);
				}

				&:nth-child(even) {
					background-color: rgba(136, 173, 255, 0.05);
				}

				&:first-of-type {
					color: #999;
				}

				&:last-of-type {
					border-bottom: none;
				}
			}

		}

		.right {
			display: flex;

			.box {

				min-width: 90rpx;

				&-active {
					background: linear-gradient(180deg, rgba(37, 76, 193, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
				}

				&:last-of-type {
					flex: 1;

					.line {
						padding: 0 24rpx;
					}
				}

				.line {
					padding: 0 24rpx;
					height: 66rpx;
					line-height: 66rpx;
					text-align: center;
					font-weight: 400;
					font-size: 18rpx;
					border-bottom: 1px solid rgba(148, 148, 156, 0.40);

					&:nth-child(odd) {
						background-color: rgba(136, 173, 255, 0.1);

					}

					&:nth-child(even) {
						background-color: rgba(136, 173, 255, 0.05);
					}

					&:first-of-type {
						color: #000;
						font-weight: 600;
					}

					&:last-of-type {
						border-bottom: none;
					}
				}

			}
		}

	}



	#pop {
		width: 650rpx;
		padding: 20rpx;
		border-radius: 16rpx;
		background-color: #fff;
	}

	//page {
	//	background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
	//	min-height: 100%;
	//}
</style>